<template>
  <div id="top-header">
    <dv-decoration-8 class="header-left-decoration" />
    <dv-decoration-5 :dur="5" class="header-center-decoration" />
    <dv-decoration-8 class="header-right-decoration" :reverse="true" />
    <div class="center-title">
      <span v-if="!operator">亚电新能源可视化数据大屏</span>
      <span v-else>{{operator.operator_name}}可视化数据大屏</span>
      </div>
    <button class="btn-logout" @click="handleLogout">注销</button>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  name: "TopHeader",
  computed: {
    ...mapGetters(["operator"]),
  },
  methods: {
    ...mapActions({
      removeToken: "user/resetToken",
    }),

    handleLogout() {
      this.removeToken();
      this.$router.replace("/login");
    },
  },
};
</script>

<style lang="scss">
#top-header {
  position: relative;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;

  .header-center-decoration {
    width: 50%;
    height: 50px;
    margin-top: 30px;
  }

  .header-left-decoration,
  .header-right-decoration {
    width: 25%;
    height: 50px;
  }

  .center-title {
    position: absolute;
    font-size: 25px;
    // font-weight: bold;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
  }

  .btn-logout {
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 12px;
    font-family: Arial;
    width: 55px;
    height: 22px;
    border-width: 1px;
    color: #fff;
    border-color: #84bbf3;
    font-weight: bold;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: inset 0px 1px 0px 0px #bbdaf7;
    text-shadow: inset 0px 1px 0px #528ecc;
    background: linear-gradient(#79bbff, #378de5);

    cursor: pointer;
  }

  .btn-logout:hover {
    background: linear-gradient(#378de5, #79bbff);
  }
}
</style>
